<template>
	<view :style="skin" class="content serviceChat">
		<view class="chatMain">
			<view class="list" v-for="(item,index) in chatList" :key="item.index">
				<!-- 客服 -->
				<view class="service" v-if="item.modelCode == 'service'">
					<view class="imgBox">

					</view>
					<p v-if="item.serviceContent.indexOf('https')">
						{{item.serviceContent}}
					</p>
					<img class="imgContent" v-else :src="item.serviceContent"></img>
				</view>
				<!-- 用户 -->
				<view class="user" v-else-if="item.modelCode == 'comm'">
					<view class="imgBox">
					<u--image shape="circle" :src="loginInfo.avatar" width="40px" height="40px"></u--image>
					</view>

					<p v-if="item.serviceContent.indexOf('https')">
						{{item.serviceContent}}
					</p>
					<img class="imgContent" v-else :src="item.serviceContent"></img>
				</view>
				<!-- 客服列表问题 -->
				<view class="serviceList" v-else-if="item.modelCode == 'serviceList'">
					<view class="imgBox">
					
					</view>
					<view>
						<view v-for="(cont,contIndex) in item.contentList" :key="contIndex">
							{{cont}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view style="" class="bottom-view" :style="{bottom:inputBottom+'px'}">

			<fui-input class="bottom-input" v-model="input" confirm-type="send" :adjust-position="false" placeholder="Please enter content"
				@confirm="handleSend" @keyboardheightchange="keyboardheightchange" />
			<view class="sendCode" @click="handleSend">send</view>
			<view class="sendCodeImg" @click="sendPhone">picture</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import { servicePage , addTalk } from '@/api/leaService.js'
	import {
		cameraAuthority
	} from '@/utils/jurisdiction.js'
	import {
		iconUpload,
	} from '@/api/user.js'
	import {
		cloudmateURL
	} from '@/utils/requestURL.js'
	export default {
		data() {
			return {
				input: '',
				inputBottom: '0',
				chatList:[],
				
				// chatList: [
				// 	{
				// 		type: 'service',
				// 		content: '您好，小二很荣幸为您服务！'
				// 	},
				// 	{
				// 		type: 'serviceList',
				// 		contentTitle:'以下可能有您所遇到的问题（常见问题）',
				// 		contentList: ['1.问题一', '2.问题一', '3.问题一']
				// 	},
				
				// 	{
				// 		type: 'user',
				// 		content: '一大碗酸菜牛肉面'
				// 	},
				// ]
			};
		},
		computed: {
			...mapState({
				skin: state => state.theme.skin
			})

		},
		onShow() {
			this.loginInfo = JSON.parse(uni.getStorageSync('loginInfo'))
			this.getChatList()
		},
		methods: {
			getChatList(){
				servicePage().then(res =>{
					if(res.code == 0){
						this.chatList = res.data.records
					}
				})
			},
			keyboardheightchange(e) {
				console.log(e);
				this.inputBottom = e.height
			},
			sendPhone(){
				cameraAuthority().then(res => {
					console.log(res);
					let that = this
					uni.chooseImage({
						count: 1, //默认9
						sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
						sourceType: ['album', 'camera'], //从相册选择
						success: async function(files) {
							let res = await iconUpload(files.tempFilePaths[0])
				
							let rrs = JSON.parse(res)
							if (rrs.code == 0) {
				
								let imgUrl = cloudmateURL + rrs.data.url
								console.log(imgUrl);
								addTalk({
									serviceContent:imgUrl
								}).then(rrs =>{
									console.log(rrs);
									that.getChatList()
								})
							}
				
				
						},
					})
				})
			},
			handleSend() {
				if(this.input == ''){
					return false
				}
				addTalk({
					serviceContent:this.input
				}).then(res =>{
					this.input = '';
					this.getChatList()
				})
				console.log('发送');
			},
		}
	}
</script>

<style lang="scss" scoped>
	.serviceChat {
		.chatMain {
			height: calc(100% - 60px);
			overflow-y: auto;
			padding: 16px;
			box-sizing: border-box;

			.list {
				margin: 8px 0;
				
				.serviceList{
					display: flex;
					
					.imgBox {
						width: 40px;
						height: 40px;
						background-color: #ccc;
						border-radius: 50%;
						margin-right: 8px;
				
					}
				}
				.service {
					display: flex;
					align-items: center;

					.imgBox {
						width: 40px;
						height: 40px;
						background-color: #ccc;
						border-radius: 50%;
						margin-right: 8px;
					}
					.imgContent{
						width: 100px;
						height: 150px;
					}
				}

				.user {
					display: flex;
					align-items: center;
					flex-direction: row-reverse;

					.imgBox {
						width: 40px;
						height: 40px;
						background-color: #ccc;
						border-radius: 50%;
						margin-left: 8px;
					}
					.imgContent{
						width: 100px;
						height: 150px;
					}
				}
			}
		}

		.bottom-view {
			width: 100%;
			height: 80px;
			display: flex;
			// justify-content: space-between;
			border-top: 1px solid #4e6ef21a;
			background: #fff;
			align-items: center;
			text-align: center;
			justify-content: center;
			position: absolute;
			bottom: 0;

			// border: 1px solid red;

			.bottom-input {
				width: calc(100% - 200px);
				background-color: #165DFF;

				margin-left: 10px;
				margin-right: 140px;
				// width: 250px;
				height: 38px;
				text-align: left;
				background: #fff;
				box-sizing: border-box;
				padding-left: 13px;
				padding-right: 10px;
				box-shadow: 0px 0px 2px rgba(85, 85, 85, 0.25);
				border-radius: 20px;
			}

			.sendCode {
				position: absolute;
				width: 50px;
				right: 80px;
				top: 25px;
				display: flex;
				text-align: center;
				align-items: center;
				justify-content: center;
				border: 0.5px solid #165DFF;
				border-radius: 30px;
				height: 30px;
				font-size: 14px;
				font-style: normal;
				font-weight: 500;
				color: #165DFF;
			}
			
			.sendCodeImg {
				position: absolute;
				width: 50px;
				right: 20px;
				top: 25px;
				display: flex;
				text-align: center;
				align-items: center;
				justify-content: center;
				border: 0.5px solid #165DFF;
				border-radius: 30px;
				height: 30px;
				font-size: 14px;
				font-style: normal;
				font-weight: 500;
				color: #165DFF;
			}
		}
	}
</style>